<!-- 会员中心主内容区 -->
<div class="page-article">
  <div id="member_security" class="member-security">
    <div class="member-title">
      <h2><{t}>身份验证<{/t}></h2> <{if !$verify.mobile && !$verify.email}><p><{t}>（未绑定手机和邮箱）<{/t}></p><{/if}>
    </div>
	<div class='member-mod'>
    <!-- 步骤图 -->
	
  <div id="verify_steps" class="steps verify-steps">
	<div class="verify_li">
		<div class="step_item" style=" background-color:#f69935;" ><i class="iconfont">&#xe637;</i></div>
		<div class="verify_line"></div>
	</div>

	<div class="verify_li">
		<div class="step_item"><i class="iconfont">&#xe64c;</i></div>
		<div class="verify_line"></div>
	</div>
	<div class="verify_li" style="width:300px">
		<div class="step_item"><i class="iconfont">&#xe628;</i></div>
		<div class="verify_line" style="width:180px;"></div>
		<div class="step_item"><i class="iconfont">&#xe633;</i></div>
	</div>

  
<div class="vrefy_forget">
	<div class="verify_text"><{t}>身份验证<{/t}></div>
	<div class="verify_text"><{t}>设置验证信息<{/t}></div>
	<div class="verify_text"><{t}>完成验证设置<{/t}></div>
</div>

    </div>
    <!-- 步骤图 -->

    <div id="verify_content" class="signupin-content verify-content">
      <form action="<{link app=b2c ctl=site_member act=verify_vcode}>" method="post">
        <input name="forward" type="hidden" value="<{$options.url}>">
        <input type="hidden" name="verifyType" value="<{$verifyType}>">
        <div class="msg"><{t}>为保障您的账户安全，请先验证您的身份<{/t}></div>
        <ul>
          <{if !$verify.mobile && !$verify.email}>
          <li class="form-item">
            <label for="" class="form-label"><{t}>填写登录密码：<{/t}></label>
            <span class="form-act"><{input type="password" name="password" id="" autofocus vtype="required" data-caution=$___b2c="请填写您的登录密码"|t:'b2c'}></span>
            <span class="caution-content"><{$msg}></span>
          </li>
          <li class="form-item-normal">
            <span class="form-act"><{button type="submit" label=$___b2c="提交"|t:'b2c' class="btn-caution btn-big" rel="_request" data-ajax-config="{onSuccess:function(rs){changeStep(rs, 2);}}"}></span>
          </li>
          <{else}>
          <li class="form_item_none">
            <label for="" class="form-label"><{t}>选择验证方式：<{/t}></label>
            <span class="form-act">
              <{if $verify.mobile}>
              <label for="for_verify_mobile" class="form-sub-label">
                <input type="radio" name="send_type" checked id="for_verify_mobile" class="action-verify-method" value="mobile">
                <{t}>手机验证<{/t}>
              </label>
              <{/if}>
              <{if $verify.email}>
              <label for="for_verify_email" class="form-sub-label">
                <input type="radio" name="send_type" <{if !$verify.mobile}>checked<{/if}> id="for_verify_email" class="action-verify-method" value="email">
                <{t}>邮箱验证<{/t}>
              </label>
              <{/if}>
            </span>
          </li>
          <{if $verify.mobile}>
          <{if $site_sms_valide == 'true'}>
          <li class="form-item op-verify-mobile">
            <label for="" class="form-label"><em class="warn">*</em><{t}>验证码：<{/t}></label>
            <span class="form-act">
              <{input type="vcode" name="forgotverifycode" class="sms-verify-input" placeholder=$___b2c="填写验证码"|t:'b2c' data-caution=$___b2c="请正确填写验证码"|t:'b2c' key='LOGINVCODE' a_class="lnklike" style='width:100px'}>
            </span>
          </li>
          <{/if}>
          <li class="form_item_none op-verify-mobile  ">
            <label for="" class="form-label"><{t}>手机号码：<{/t}></label>
            <input type="hidden" name="mobile" value="<{$data.mobile}>">
            <span class="form-act"><{$data.phone_setting}>&nbsp;&nbsp;&nbsp;&nbsp;<{$data.mobile}><a href="<{link app=b2c ctl=site_passport act=send_vcode_sms}>" data-mobile="<{$data.mobile}>" class="btn action-get-verifycode"><span><span><{t}>获取验证码<{/t}></span></span></a></span>
          </li>
          <li class="form-item op-verify-mobile">
            <label for="" class="form-label"><{t}>填写验证码：<{/t}></label>
            <span class="form-act"><{input type="text" name="vcode[mobile]" id="" vtype="required"}></span>
            <span class="caution-content"><{$msg}></span>
          </li>
          <{/if}>
          <{if $verify.email}>
          <li class="form_item_none op-verify-email <{if $verify.mobile}>hide<{/if}>">
            <label for="" class="form-label"><{t}>邮箱地址：<{/t}></label>
            <input type="hidden" name="email" value="<{$data.email}>">
            <span class="form-act"><{$data.email}> <a href="<{link app=b2c ctl=site_passport act=send_vcode_email}>" class="btn action-resend-email" rel="_request" data-params="{uname:'<{$data.email}>',type:'activation'}" data-ajax-config="{loadtip:'发送中...'}"><span><span><{t}>发送验证邮件<{/t}></span></span></a></span>
          </li>
          <li class="form-item op-verify-email <{if $verify.mobile}>hide<{/if}>">
            <label for="" class="form-label"><{t}>填写验证码：<{/t}></label>
            <span class="form-act"><{input type="text" name="vcode[email]" id="" vtype="required"}></span>
            <span class="caution-content"><{$msg}></span>
          </li>
          <{/if}>
          <li class="form-item-normal">
		  <label class="form-label" for=""></label>
            <span class="form-act"><{button type="submit" label=$___b2c="提交"|t:'b2c' class="btn-caution" rel="_request" data-ajax-config="{onSuccess:function(rs){changeStep(rs, 3, function(e){passwordStrength.init($$('form .auto-password-check-handle'));});}}"}></span>
          </li>
        <{/if}>
        </ul>
      </form>
    </div>
	  </div>
  </div>

</div>
<script>
var module = $('verify_content');
var Query = {
    send: function(url, data, fn){
        new Request({
            url: url,
            link: 'cancel',
            onSuccess: function(rs) {
                try{
                    rs = JSON.decode(rs);
                }catch(e){}
                if(typeof rs.error === 'string') Message.error(rs.error);
                else if(typeof rs.success === 'string') Message.success(rs.success);
                fn && fn.call(this, rs);
            }
        }).post(data);
    }
};

function changeStep(rs, x, fn) {
    if(rs && rs[0]) {
        if(typeOf(rs[0]) === 'string') {
            module.innerHTML = rs[0];
            if(x) $('verify_steps').getElement('.active').removeClass('active').getSiblings('.step-' + x).addClass('active');
        }
        else if(typeOf(rs[0]) === 'object') {
            if(rs[0].error) return Message.error(rs[0].error);
        }
        fn && fn.call(this);
    }
}
module.addEvents({
    'change:relay(.action-verify-method)': function(e) {
        var form = this.getParent('form');
        form.getElements('.op-verify-mobile, .op-verify-email').addClass('hide');
        form.getElements('.op-verify-' + this.value).removeClass('hide');
    },
    'click:relay(.action-resend-email)':function(e) {
        e.stop();
        var url = this.href;
        var data = JSON.decode(this.get('data-params'));
        Query.send(url, data, changeStep, function(rs){
            if(rs.success) Message.success(rs.success);
        });
    },
    'click:relay(.action-get-verifycode)': function(e) {
        e.stop();
        if(this.hasClass('disabled')) return false;
        var el = module.getElement('.action-account-check');
        if(this.hasClass('disabled')) return false;

//		var obj = $$("#quhao option:selected");
//		var phone_setting = '';
//		if(obj && obj[0])
//		{
//			phone_setting = obj[0].value.replace("+","%2B");
//		}

      <{if $site_sms_valide == 'true'}>
        var form = this.getParent('form');
        if(form.getElement('.sms-verify-input').value == '')
        {
          return;
        }
        sendVerify(this, 'uname=' + this.get('data-mobile') +  '&phone_setting=' + <{$data.phone_setting}>+'&type=activation' + '&sms_vcode=' + form.getElement('.sms-verify-input').value);
      <{else}>
        sendVerify(this, 'uname=' + this.get('data-mobile') + '&phone_setting=' + <{$data.phone_setting}> + '&type=activation');
      <{/if}>
    }
});

function sendVerify(el, data) {
    var url = el.href;
    el.addClass('disabled');
    var textCont = el.getElement('span span');
    textCont.innerHTML = el.get('text') + '(<i>0</i>)';
    var cd = new countdown(textCont.getElement('i'), {
        start: 120,
        secondOnly: true,
        callback: function(e) {
            el.removeClass('disabled');
            textCont.innerHTML = '<{t}>重发验证码<{/t}>';
        }
    });
    Query.send(url, data, function(rs) {
        if(rs.error) {
            cd.stop();
            el.removeClass('disabled');
            textCont.innerHTML = '<{t}>重发验证码<{/t}>';
        }
    });
}
</script>
